<template>
  <div class="img-view">
    <div class="view" @click.stop="scale" v-show="!isScale">
      <img :src="imgSrc" alt="">
    </div>
   <div class="img-layer" @click.stop="isScale=false" v-show="isScale">
     <img :src="imgSrc" alt="">
   </div>
  </div>
</template>

<script>
  export default {
    name: "IMGScale",
    data(){
      return {
        isScale:false
      }
    },
    props:{
      imgSrc:{
        type:String
      },
      isView:{
        type:Boolean,
        default:false
      }
    },
    methods:{
      scale(){
        this.isScale=true
      }
    }
  }
</script>

<style scoped lang="stylus">
  .img-view
      width 100%;
      height 100%
      .view
        img
          width 100%
          max-height 100%
      .img-layer
        background black
        width 100vw
        height 100vh
        position fixed
        z-index 9999
        top 0
        left 0
        img
          width auto
          height auto
          max-width 100vw
          max-height 100vh
          position absolute
          left 50%
          top  50%
          transform translate(-50%,-50%)


</style>
